<template>
	<view class="content">
		<view class="user-block">
			<image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/mine/bg.jpg"
				mode="widthFix" class='bg-img'></image>
			<view class="head-img">
				<image :src="user.faceUrl" class="mine-img"></image>
				<button class="avatar-wrapper" @chooseavatar="photoChoose" open-type="chooseAvatar" size="mini">
					上传头像</button>
			</view>
		</view>
		<view class="bottom">
			<view class="info">
				
				<view class="name">
					<view class="sex-name">
						昵称
					</view>
					<view class="phone">
						<input type="nickname" class="mine-name" :value="user.name" placeholder="请输入昵称" @blur="bindblur"
						 @input="bindinput"/>
					</view>
				</view>
				<view class="string"></view>
				<view class="name">
					<view class="sex-name">
						手机号
					</view>
					<view class="phone">
						<input v-model="user.phone" disabled="true"/>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="handleSave">
			提交
		</view>
	</view>
</template>

<script>
	import config from '@/config.js'
	import {
		getCustomNav,
		showToast
	} from '@/util/util.js'
	import {
		upload
	} from '@/api/bussiness.js'
	import {
		addAndUpdateUser,
		getUserInfoApi
	} from '@/api/user.js'
	import {
		uploadFile
	} from '@/api/file.js'
	import {
		getStorage,
		setStorage
	} from '@/util/auth.js';
	import {
		validate
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				titleColor: '#fff',
				user: {
					faceUrl: 'https://www.adhrsp.com/file/91885/img/Mr.jpg',
					name: '',
					phone: ''
				},
				rules: {
					// faceUrl: {
					// 	name: '头像',
					// 	required: true,
					// },
					// userName: {
					// 	name: '昵称',
					// 	required: true,
					// },
					phone: {
						name: '手机号',
						required: true,
					},
				}
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.topBgColor = '#117DFF';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		methods: {
			bindblur(e) {
				this.user.name = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.user.name = e.detail.value;
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getUser(type) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getUserInfoApi({}).then(data => {
					uni.hideLoading()
					this.user = data
				}).catch(() => {
					uni.hideLoading()
				})
			},
			photoChoose(e) {
				const filePath = e.detail.avatarUrl;
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				this.uploadFace(filePath);
			},
			uploadFace(filePath) {
				uploadFile(filePath).then((res) => {
					const data = JSON.parse(res.data);
					if (data.code == 200) {
						this.user.faceUrl = data.data.url
						this.showToast('上传成功')
						uni.hideLoading()
						
					} else {
						this.showToast(data.msg)
					}

				}).catch((res) => {
					uni.hideLoading()
					this.showToast('上传失败');
				})
			},
			handleSave() {
				if (validate(this.user, this.rules)) {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					addAndUpdateUser({
						faceUrl: this.user.faceUrl,
						name: this.user.name
					}).then((res) => {
						uni.hideLoading()
						let oldUser = getStorage('user');
						oldUser.userName = this.user.userName
						oldUser.faceUrl = this.user.faceUrl
						setStorage('user', oldUser)
						showToast('保存成功', () => {
							uni.switchTab({
								url: '/pages/mine/index'
							})
						})
					}).catch(() => {
						uni.hideLoading()
						showToast('保存失败');
					})
					this.getUser()
					// uni.navigateBack({
					// 	url:'/pages/mine/index'
					// })
				}
				
			}
		},
		onShow() {
			const loginInfo = getStorage('user');
			if (loginInfo) {
				this.user = loginInfo
			}
			this.getUser()
		},
		onLoad() {
		},
		mounted() {
			// this.custom = getCustomNav();
			// this.getSelectUserById()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #F6F6F6;

		.top {
			position: relative;
			width: 100%;
			height: 290rpx;
		
			.img {
				width: 100%;
				height: 100%;
				background-color: #E94647;
		
				image {
					width: 100%;
					height: 120%;
					z-index: -1;
				}
			}
		}
		.head-img {
			display: flex;
			// flex-direction: column;
			justify-content: center;
			align-items: center;
		
			.mine-img {
				width: 130rpx;
				height: 130rpx;
				background: #efefef;
				border-radius: 50%;
				margin-right: 20rpx;
				position: relative;
			}
		
			.avatar-wrapper {
				margin-left: -18rpx;
				color: #F7F7F7;
			}
		}
		.user-block {
			height: 320rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 30rpx 0 30rpx;
		
			.bg-img {
				width: calc(100% - 60rpx);
				position: absolute;
				left: 30rpx;
				right: 30rpx;
				border-radius: 16rpx;
			}
		
			.user-photo {
				width: 130rpx;
				height: 130rpx;
				background: #efefef;
				border-radius: 50%;
				margin-right: 20rpx;
				position: relative;
			}
		
			.user-info {
				width: calc(100% - 150rpx);
				color: #fff;
				position: relative;
		
				.user-name {
					font-weight: bold;
		
					.user-text {
						font-size: 24rpx;
						margin-left: 10%;
						color: #c6c6c6;
					}
				}
		
				.user-name1 {
					font-weight: bold;
					margin-bottom: 10rpx;
		
					.user-text {
						font-size: 24rpx;
						margin-left: 10%;
						color: #c6c6c6;
					}
				}
		
				.edit-resume {
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
		}

		.bottom {
			position: relative;
			width: 100%;
			border-radius: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #F6F6F6;
			border-radius: 45rpx 45rpx 0 0;
			z-index: 99;
			// margin-top: -35rpx;

			.info {
				// position: absolute;
				// bottom: 40rpx;
				// left: 30rpx;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// align-items: center;
				width: 100%;
				// height: 155rpx;
				padding: 30rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				background-color: #fff;

				.head-img {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.mine-img {
						align-items: center;
						width: 170rpx;
						height: 170rpx;
						border-radius: 50%;
						margin-bottom: 30rpx;
						background-color: #F6F6F6;
					}

					.avatar-wrapper {
						margin-bottom: 30rpx;
					}
				}

				.name {
					display: flex;
					justify-content: left;
					margin: 50rpx 0;

					.sex-name {
						// margin-right: 150rpx;\
						width: 200rpx;
					}

					.phone {}

				}

				.string {
					width: 100%;
					height: 5rpx;
					background-color: #F7F7F7;
				}
			}

		}


		.btn {
			width: 270rpx;
			height: 80rpx;
			border-radius: 40rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 30rpx auto;
			background-color: #E94647;
		}
	}
</style>